<template>
    <div class="">
        <div id='fastScreen'>
            <div class="home" style="height:100%">
                <div class="title_box" ref="title_box">
                    <div class="real_time_box">
                        <div class="title_chinese">实时更新</div>
                        <div class="title_english">{{storeName || '店铺名称'}}</div>
                    </div>
                    <div class="progress_box" style="display: flex;justify-content: flex-end;align-items: flex-end;">
                        <div class="order_progress">
                            还有<span style="color:#DCA873">{{count?count:0}}</span>单订单制作中
                        </div>
                        <div style="font-size:38px;color:#666">日期:{{day}}</div>
                    </div>
                </div>
                <div class="big_number_box" ref="big_number_box" style="height:100%">
                    <div class="ready_box ready_box_right" style="min-height:100%">
                        <div class="ready_box_text ready_box_text_bottom">
                            <div class="left">
                                <div class="ready_text ready_text_bottom">准备中</div>
                                <div class="hard_word">请耐心等待，正在努力制作哦~ </div>
                            </div>
                            <div class="right">
                                <img src="../../assets/img/instore/is_ready.png" />
                            </div>
                        </div>
                        <div class="all_number all_number_right">
                            <div class="num_box suf" ref="num_box" v-for="(item,index) in status_1" :key="index">{{item.callNo}}</div>
                        </div>
                        <div class="blank_box" style="width: 100%;bottom: 0;left: 0;position: absolute;background: #f7f7f9;"></div>
                    </div>
                    <div class="ready_box ready_box_left" style="min-height:100%">
                        <div class="ready_box_text ">
                            <div class="left">
                                <div class="ready_text ready_text_bottom">请取单</div>
                                <div class="hard_word">以下订单已完成</div>
                            </div>
                            <div class="right">
                                <img src="../../assets/img/instore/form.png" class="order_num_img" />
                            </div>
                        </div>
                        <div class="take_num_box" style="margin-bottom:0;">
                            <div class="number_boxs" v-for="(item,index) in arr" :key="index">{{item}}</div>
                        </div>
                        <div class="is_finish_box">
                            <div class="finish_title"></div>
                            <div class="finish_right" style="display: flex;width:100%;flex-wrap: wrap">
                                <div class="finish_num suf" style="width:33.33%" v-for="item in status_2.slice(1)"  v-if="item.callNo != ''&& item.callNo">{{item.callNo}}</div>
                            </div>
                        </div>
                        <div class="blank_box2" style="width: 100%;bottom: 0;left: 0;position: absolute;background: #f7f7f9;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {fastScreen} from "@/api/instore";
    import "../../assets/css/app.css";
    import index from '../../api/index';

    export default {
        created() {
            if (this.$route.query.storeId) {
                this.storeId = this.$route.query.storeId
                this.fetchData()
            }
            this.upLoad2(this)
            // setInterval(() => {
            //     this.fetchData()
            // }, 3000)
        },
        data() {
            return {
                status_1: [],
                status_2: [],
                count: '',
                arr: [],
                storeName:'',
                day:'',
                storeId:'',
            };
        },
        methods: {
            upLoad2(_that) {
            _that.lockReconnect = false;
            _that.ws = null;
            const publishUrl = 'wss://' + 'bkycms.com' + ':9875';
            var wsUrl = index.isDev ? publishUrl : 'wss://' + window.location.host + ':9875';
            createWebSocket(wsUrl);
            function createWebSocket(url) {
              try {
                if ('WebSocket' in window) {
                  _that.ws = new WebSocket(url);
                }
                initEventHandle();
              } catch (e) {
                reconnect(url);
              }
            }
            function initEventHandle() {
              _that.ws.onclose = function () {
                reconnect(wsUrl);
              };
              _that.ws.onerror = function () {
                reconnect(wsUrl);
              };
              _that.ws.onopen = function () {
                // heartCheck.reset().start();
                let actions = {type:'storeId',data:_that.storeId}; //请根据实际项目需要进行修改
                _that.ws.send(JSON.stringify(actions));
              };
              _that.ws.onmessage = function (event) {
                // heartCheck.reset().start();
                // console.log('客户端接收服务端数据时触发:' + event.data);
                console.log('llws收到消息啦')
                if (event.data) {
                  var hdData = JSON.parse(event.data);
                  if (hdData.type=='2') {
                    // fetchData()
                    _that.storeName = hdData.storeName
                    document.title = '实时更新-'+hdData.storeName
                    _that.day = hdData.day
                    _that.count = hdData.number
                    _that.status_1= hdData.preparing
                    _that.status_2= hdData.pleaseTake
                    let takeNo=[]
                    if(hdData.pleaseTake.length){
                      hdData.pleaseTake.forEach(row =>{
                        takeNo.push(row.callNo)
                      })
                      _that.arr = takeNo[0].split('')
                    }
                  }
                }
              };
            }
            window.onbeforeunload = function () {
              _that.ws.close();
            };
            async function fetchData() {
              const {data} = await fastScreen({storeId:_that.storeId});
              _that.storeName = data.storeName
              document.title = '实时更新-'+data.storeName
              _that.day = data.day
              _that.count = data.number
              _that.status_1= data.preparing
              _that.status_2= data.pleaseTake
              let takeNo=[]
              if(data.pleaseTake.length){
                data.pleaseTake.forEach(row =>{
                  takeNo.push(row.callNo)
                })
                _that.arr = takeNo[0].split('')
              }
            }
            function reconnect(url) {
              if (_that.lockReconnect) return;
              _that.lockReconnect = true;
              setTimeout(function () {
                createWebSocket(url);
                _that.lockReconnect = false;
              }, 2000);
            }
            //心跳检测
            var heartCheck = {
              timeout: 1000,
              timeoutObj: null,
              serverTimeoutObj: null,
              reset: function () {
                clearTimeout(this.timeoutObj);
                clearTimeout(this.serverTimeoutObj);
                return this;
              },
              start: function () {
                var self = this;
                this.timeoutObj = setTimeout(function () {
                  _that.ws.send('ping');
                  // console.log("ping!")
                  self.serverTimeoutObj = setTimeout(function () {
                    _that.ws.close();
                  }, self.timeout);
                }, this.timeout);
              }
            };
          },
          async fetchData() {
            const {data} = await fastScreen({storeId:this.storeId});
            this.storeName = data.storeName
            document.title = '实时更新-'+data.storeName
            this.day = data.day
            this.count = data.number
            this.status_1= data.preparing
            this.status_2= data.pleaseTake
            let takeNo=[]
            if(data.pleaseTake.length){
              data.pleaseTake.forEach(row =>{
                takeNo.push(row.callNo)
              })
              this.arr = takeNo[0].split('')
            }
          },
        },
      destroyed(){
        console.log('页面销毁')
        this.lockReconnect = true
        this.ws.close()
      },
    };
</script>
